<template>
<div class="every-bigbox" >

  <div :class="['rest-box', {activeBoxShadow: isActive}]"
  @mouseenter="changeBoxShadow" @mouseleave="clearBoxShadow" @click="gotoMenu(item._id)">
        <div class="titleText ">
          {{ $t(shopName) }}
        </div>
        <div class="subTitleText">
          {{ $t("tags."+item.tags[0].toLowerCase()) }}
        </div>
        <!-- 图片 -->
        <div class="img-box">
          <div class="img-box-1">
            <div class="rest-food-name" v-if="isActive">
              {{ $t(item.items[0] === undefined ?
                defaultItems[0].name[language] : item.items[0].name[language])  }}
            </div>
            <div class="rest-image-box">
              <ImgUrl
                :item-url="item.items[0] === undefined ?
                  defaultItems[0].image : item.items[0].image.url"
              />
              <img
                src="@/assets/Assets/dark-dish.png"
                alt=""
                class="dish-image"
              > <!-- 盘子的背景图片1 -->
            </div>
          </div>

          <div class="img-box-2">
            <div :class="['rest-food-name', {activeTrans: isActive}]" v-if="isActive">
              {{ item.items[1] === undefined ?
                defaultItems[1].name[language] : item.items[1].name[language] }}
            </div>
            <div :class="['rest-image-box', {activeTrans: isActive}]">
              <ImgUrl
                :item-url="item.items[1] === undefined ?
                  defaultItems[1].image : item.items[1].image.url"
              />
              <img
                src="@/assets/Assets/dark-dish.png"
                alt=""
                class="dish-image"
              ><!-- 盘子的背景图片2 -->
            </div>
          </div>

          <div class="img-box-3">
            <div class="rest-food-name" v-if="isActive">
              {{ item.items[2] === undefined ?
                defaultItems[2].name[language] : item.items[2].name[language] }}
            </div>
            <div class="rest-image-box">
              <ImgUrl
                :item-url="item.items[2] === undefined ?
                  defaultItems[2].image : item.items[2].image.url"
              />
              <img
                src="@/assets/Assets/dark-dish.png"
                alt=""
                class="dish-image"
              ><!-- 盘子的背景图片3 -->
            </div>
          </div>
        </div>
      </div>
</div>

</template>

<script>

import { set } from '@/common/utils';
import { mapState, mapActions } from 'vuex';

// 组件
import ImgUrl from '@/views/restaurant/components/imgUrl/ImgUrl.vue';

export default {
  components: { ImgUrl },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      imageUrl: '',
      isActive: false,
      defaultItems: [
        {
          name: {
            'zh-CN': '红烧狮子头',
            'en-US': 'Stewed Lion Head Chinese Meatballs',
            Number: '111',
          },
          image: 'https://s3.amazonaws.com/ricepo-food/image-3r7hnd04jyk7nbn3.png',
        },
        {
          name: {
            'zh-CN': '三杯鸡',
            'en-US': 'Three Cups Chicken',
          },
          image: 'https://s3.amazonaws.com/ricepo-food/image-5b7jxyy2jvu95frk.png',
        },
        {
          name: {
            'zh-CN': '番茄鸡蛋面',
            'en-US': 'Tomato Egg Noodle',
          },
          image: 'https://s3.amazonaws.com/ricepo-food/image-o1bt3qsjz0fhei4.png',
        },
      ],
    };
  },

  methods: {
    ...mapActions([
      'saveRestaurantName',
    ]),
    changeBoxShadow() {
      this.$data.isActive = true;
    },
    clearBoxShadow() {
      this.$data.isActive = false;
    },

    gotoMenu(id) {
      this.$router.push(`/menu/${id}`);
      const { name } = this.$props.item;
      const kind = this.$props.item.tags;
      set('restaurantNmae', name);
      set('restaurantKind', kind);
    },

  },

  computed: {
    ...mapState({
      language: (state) => state.language.language,
    }),
    shopName() {
      return this.$props.item.name[this.language];
    },

  },

};
</script>

<style>

</style>
